<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
      Vysor
    </title>
    <script src='common/jquery-2.1.1.min.js' type="text/javascript"></script>

    <link href='font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

    <script src="require.js" type="text/javascript"></script>
    <script src='device-settings.js' type="text/javascript"></script>
    <script src='farm-access.js' type="text/javascript"></script>
    <script src='util.js' type="text/javascript"></script>
    <script src='socket/socket.js' type='text/javascript'></script>
    <script src='adb/adb-client.js' type='text/javascript'></script>
    <script src='modal.js' type="text/javascript"></script>
    <script src='list.js' type="text/javascript"></script>

    <script src='uglify-list.js' type="text/javascript"></script>

    <link href="list.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Vysor</a>
        </div>
      </div>
    </div>
    <div id='site-wrapper'>
      <div class="modal fade"  id="settings-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id='settings-title'>Settings</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">Name</span>
                  <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" id='new-display-name'>
                </div>
                <br/>


                <label>Window</label>
                <div class='well'>
                  <div class="checkbox">
                    <label>
                      <input id='pin-title-check' type="checkbox" checked> Pin Title Bar
                    </label>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input id='softkeys-check' type="checkbox" checked> Navigation Bar
                    </label>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input id='always-on-top-check' type="checkbox"> Always On Top
                    </label>
                  </div>
                </div>

                <div id='quality-container'>
                  <label>Image Quality</label>
                  <div class='well'>
                    <label>Bitrate</label>
                    <select id='bitrate' class="form-control">
                      <option>
                        500Kbps (fast, low quality)
                      </option>
                      <option>
                        750Kbps
                      </option>
                      <option>
                        1Mbit
                      </option>
                      <option>
                        1.5Mbit
                      </option>
                      <option>
                        2Mbit
                      </option>
                      <option>
                        3Mbit
                      </option>
                      <option>
                        4Mbit
                      </option>
                      <option>
                        6Mbit
                      </option>
                      <option>
                        8Mbit (slow, high quality)
                      </option>
                    </select>

                    <br/>
                    <label>Resolution</label>
                    <select id='resolution' class="form-control">
                      <option>Use Recommended Settings</option>
                      <option>25%</option>
                      <option>50%</option>
                      <option>75%</option>
                      <option>Original</option>
                    </select>

                    <br/>
                    <label>Video Decoder</label>
                    <select id='decoder' class="form-control">
                      <option>Software (Recommended)</option>
                      <option>Hardware</option>
                      <option>Hardware with fallback</option>
                    </select>
                  </div>
                </div>

                <div id='display-settings-container'>
                  <label>Display Settings</label>
                  <div class='well'>
                    <label class='hidden'>Size and Density</label>
                    <select id='display-settings' class="form-control hidden">
                    </select>

                    <div class="checkbox">
                      <label>
                        <input id='dim-display' type="checkbox"> Dim Display while Connected
                      </label>
                    </div>
                  </div>
                </div>

              </form>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id='settings-cancel'>Cancel</button>
            <button type="button" class="btn btn-default" id='settings-defaults'>Defaults</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id='settings-ok'>Save</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <div class="modal fade"  id="notificationModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id='modal-title'></h4>
            </div>
            <div class="modal-body">
              <p id='modal-body'></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" id='modal-cancel'></button>
              <button type="button" class="btn btn-primary" id='modal-ok'></button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <div class="modal fade"  id="connectModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Connect to Network Device (adb connect)</h4>
            </div>
            <div class="modal-body">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">IP Address of Android Device</span>
                <input type="text" class="form-control" placeholder="192.168.1.100[:5555]" aria-describedby="basic-addon1" id='connect-address'>
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" id='connect-cancel'>Cancel</button>
              <button type="button" class="btn btn-primary" id='connect-ok'>Connect</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <h5 id='choose-header' class='list-header'>
        Choose a device
      </h5>
      <div id='devices' class="list-group"></div>
      <p class="lead" id='find'>
        <a href="#" class="btn btn-lg btn-default" id='connect-android' name="connect-android">Find Devices</a>
      </p>
      <div>
        <a href='#' id='connect-network' title='Connect to Network Device' class='btn btn-xs btn-default fa fa-link'></a>
      </div>
      <div id='farms-list'>
      </div>
      <h5>
        Settings
      </h5>
      <div class='well main-settings'>
        <form class='form-horizontal'>
          <div id='vysor-keyboard' class='form-group'>
            <label class='col-sm-4 control-label'>International Keyboard</label>
            <div class='col-sm-6 checkbox'>
              <input type="checkbox" name="vysor-keyboard" value="1" id='vysor-keyboard-check'>
            </div>
          </div>
          <div id='share-all' class='form-group'>
            <label class='col-sm-4 control-label'>Share All Devices</label>
            <div class='col-sm-6 checkbox'>
              <input type="checkbox" name="share-all" value="1" id='share-all-check'>
            </div>
          </div>
          <div class='form-group'>
            <label class='col-sm-4 control-label'>Customize Vysor</label>
            <div class='col-sm-6 checkbox'>
              <a id='customize-vysor'>Manage Key Bindings and Buttons</a>
            </div>
          </div>
          <div id='connect-automatically' class='form-group'>
            <label class='col-sm-4 control-label'>Start automatically</label>
            <div class='col-sm-6 checkbox'>
              <select id='connect-automatically-select' class="form-control">
                <option>
                  Always
                </option>
                <option>
                  Notification Prompt
                </option>
                <option>
                  Never
                </option>
              </select>
            </div>
          </div>
        </form>
      </div>
      <h5>
        Status
      </h5>
      <div class='well'>
        <div id='purchase'>
          <!-- <p id='survey'><a href='https://goo.gl/forms/dXXKiQZV2OZGMLED2' target='_blank'>Please take a quick survey to help improve Vysor.</a></p> -->
          <p>
            <a class='purchase' id='used' name="used"></a>
          </p>
        </div>
        <div id='login-container'>
          <p id='login-line'>
            <a id='login' name="login">Login</a> for offline usage and Vysor Share.
          </p>
          <p id='logging-in'>
            Logging in...
          </p>
        </div>
        <p id='not-found'>
          Android not found? Make sure <a href='https://support.vysor.io/support/technical/notfound/' target='_blank'>Android USB Debugging is enabled</a>.
        </p>
        <p id='windows'>
          Windows users need <a href='https://adb.clockworkmod.com' target='_blank'>ADB Drivers</a>.
        </p>
        <p id='vysor-share-server-status'></p>
        <p id='whitelist-count'><a href='#'></a></p>
        <p id='adb-server-status'></p>
        <p id='vysor-version'></p>
        <div id='login-info'>
          <p>
            <span id='login-email'></span>
            <span> - </span>
            <span id='account-management-info'></span><span> </span><a id='account-management' target='_blank'></a>
          </p>
        </div>
        <div id='desktop-app'><p><a href='https://vysor.io/download' target='_blank'>Get the standalone Vysor desktop app for better performance!</a></p></div>
      </div>
      <div class='this-pads-the-footer-so-it-scrolls' style='min-height: 50px'></div>
      <div class="navbar navbar-default navbar-fixed-bottom">
        <div class="container-fluid">
          <div class="navbar-header">
            <p class="navbar-text"><a href="http://www.clockworkmod.com/" target="_blank"><i class='fa fa-home'></i></a></p>
            <p class="navbar-text"><a href="http://twitter.com/vysorapp" target="_blank"><i class='fa fa-twitter'></i></a></p>
            <a class="navbar-text" href="http://dev.vysor.io/" target='_blank'>Developers</a>
            <a class="navbar-text" href="https://support.vysor.io/" target='_blank'>Support</a>
            <a class="navbar-text" href="#" id='bugreport'>Bug Report</a>
            <!-- <a id='tutorial' class="navbar-text" href="#">Tutorial</a> -->
            <a id='manual' class="navbar-text" href="https://vysor.io/manual" target="_blank">Manual</a>
            <a id='reload-vysor' class="navbar-text" href='#' name="reload-vysor">Reload Vysor</a>
            <a id='reset-vysor' class="navbar-text" href='#' name="reload-vysor">Reset Vysor</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
